<template>
  <div style="margin: 10px">
    <el-button type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
  </div>
  <el-card>
    <el-table :data="tableData" border stripe style="width: 100%" row-key="menuId">
      <el-table-column prop="menuId" label="ID" />
      <el-table-column prop="name" label="菜单名称"/>
      <el-table-column prop="nameZh" label="中文名" />
      <el-table-column prop="component" label="关联组件"/>
      <el-table-column prop="url" label="关联路径" />
      <el-table-column prop="icon" label="图标"/>
      <el-table-column prop="permissionCode" label="权限识别码" />
      <el-table-column prop="orderId" label="排序代码"/>
      <el-table-column label="操作" width="235px">
        <template #default="{row}">
          <el-button @click="openDialog('edit', row)" size="small" type="primary">编辑</el-button>
          <el-button @click="handleRemove(row.menuId)" size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

<!--  Add/Edit dialog -->
  <el-dialog v-model="addEditActiveFlag" :title="dialogTitle" width="500px" @close="resetForm">
    <el-form :model="menuForm" ref="menuFormRef">
      <el-form-item label="ID" prop="menuId">
        <el-input v-model="menuForm.menuId" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="menuForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="中文名" prop="nameZh">
        <el-input v-model="menuForm.nameZh" autocomplete="off" />
      </el-form-item>
      <el-form-item label="关联组件" prop="component">
        <el-input v-model="menuForm.component" autocomplete="off" />
      </el-form-item>
      <el-form-item label="关联路径" prop="url">
        <el-input v-model="menuForm.url" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="menuForm.icon" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限识别码" prop="permissionCode">
        <el-input v-model="menuForm.permissionCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序代码" prop="orderId">
        <el-input v-model="menuForm.orderId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父节点" prop="parentId" v-if="menuForm.parentId">
        <el-select v-model="menuForm.parentId" placeholder="父节点选择">
          <el-option v-for="item in tableData"
                     :key="item.menuId"
                     :label="item.nameZh"
                     :value="item.menuId"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addEditActiveFlag = false">关闭</el-button>
      <el-button type="primary" @click="handleFormSubmit(dialogTitle)">提交</el-button>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">

import {Plus} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {addMenu, deleteMenu, getList, updateMenu} from "@/api/menu.ts";
import {MenuTree} from "@/type/MenuTree.ts";
import {MenuData} from "@/type/MenuData.ts";
import {ElMessage, FormInstance} from "element-plus";

const tableData = ref<Array<MenuTree>>()

const addEditActiveFlag = ref(false)
const menuForm = ref({} as MenuData)
const menuFormRef =ref<FormInstance>()
const dialogTitle = ref('')


onMounted(() => {

  initData()
})



const initData = () => {

  getList().then(res => {
    tableData.value = buildMenuTree(res.data)
  })
}

const  buildMenuTree = (rawDataArray: MenuTree[], parentId?: number) => {

  const tree: MenuTree[] = []

  for (const menuData of rawDataArray) {

    if (menuData.parentId == parentId) {
      const children = buildMenuTree(rawDataArray, menuData.menuId)
      if (children.length) {
        menuData.children = children
      }
      tree.push(menuData)
    }
  }

  return tree
}

const resetForm = () => {

  menuForm.value = {} as MenuData
}


const openDialog = (mode: string, row?: MenuData) => {

  if (mode == 'edit'){

    if (row){
      dialogTitle.value = '编辑'
      menuForm.value = row
      addEditActiveFlag.value = true
    }
  }else if(mode == 'add'){
    dialogTitle.value = '新增'
  }


  addEditActiveFlag.value = true
}

const handleFormSubmit = (mode: string) => {

  if (mode == '新增' ){
    handleAdd(menuForm.value)
  }else if (mode == '编辑'){
    handleEdit(menuForm.value)
  }

  addEditActiveFlag.value = false
}


const handleAdd = (menu: MenuData) => {
  addMenu(menu).then(_ => {
    ElMessage.success('Operate success')
    initData()
  })
}


const handleEdit = (menu: MenuData) => {

  updateMenu(menu).then(_ => {
    ElMessage.success('Operate success')
    initData()
  })
}





const handleRemove = (menuId: number) => {

  deleteMenu(menuId).then(_ => {
    ElMessage.success('Operate success')
    initData()
  })
}
</script>

<style scoped>

</style>